<template>
    <!-- 表格组件 -->
    <el-table :data="tableData">
        <el-table-column width="200" label="日期"  align="center">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <!-- <el-icon><timer /></el-icon> -->
                    <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column width="200" label="标题" prop="title"  align="center" />
        <!-- <el-table-column width="200" label="描述" prop="text" /> -->
        <el-table-column width="80" label="广告链接"  align="center">
            <template #default="scope">
                <a :href="scope.row.link" target="_blank">链接</a>
            </template>
        </el-table-column>
        <el-table-column label="图片"  align="center">
            <template #default="scope">
                <!-- <span>{{ scope.row.picUrl }}</span> -->
                <!-- :preview-src-list="[scope.row.picUrl]"
                fit="cover" -->
                <div class="demo-image__preview">
                    <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.picUrl"
                  
                    />
                </div>
            </template>
        </el-table-column>
        <el-table-column  align="center">
            <template #header>操作</template>
            <template #default="scope">
                <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                <el-button size="small" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
// 导入消息提示框
import { ElMessage, ElMessageBox } from 'element-plus';
import type { Action } from 'element-plus'
import {ref } from 'vue';
import { listBanner, removeBanner,photoDelete } from '../../api/request';
import moment from "moment";
import api from '../../api/index'
// 导入创建路由方法
import { useRouter } from 'vue-router';
// 定义路由
const $router = useRouter();
// 用户临时身份token
let token = localStorage.getItem('token');
// 定义数据结构
interface banner {
    // create_time: string
    // title: string
    // link: string
    // picUrl: string
    // id: string | number
    [key:string]: string | number
}
// 记录数据
let tableData = ref<any>([]);

// 点击删除广告
const handleDelete = (index: number, row: any) => {
    // console.log(index, row)
    // 获取当前点击的选项
    let { id, picUrl, title } = row;
    ElMessageBox.confirm(
        `是否删除这个“${title}”广告?`,
        'Confirm',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            // console.log("点击确定")
            // 删除广告
            await removeBanner({ id })
                .then(
                    content => {
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )
            // 删除分类对应的图片
            console.log("-->", picUrl)
            await photoDelete({ picUrl: picUrl })
                .then(
                    content => {
                        // console.log(content);
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )
            // 删除程序中数组对应的数据
            tableData.value.splice(index, 1);
        })
        .catch((action: Action) => {
            // console.log("点击取消")
        })

}

// 获取广告列表
const getBannerListFn = async (page = 1, pageSize = 10) => {
    await listBanner({ page, pageSize })
        .then(
            content => {
                // console.log(content)
                let { code, result, total } = content;
                if (code == 200) {
                    // 整合后台数据
                    let arr = result.map((item: banner, index: number) => {
                        item.index = index + 1;
                        item.picUrl = api.url + item.picUrl
                        item.create_time = moment(new Date(item.create_time)).format('YYYY-MM-DD HH:mm:ss')
                        return item;
                    })
                    tableData.value = arr;
                }
            }
        )
}

// 初始化
getBannerListFn();
</script>

<style scoped>
.demo-image__preview {
    z-index: 100000000!important;
}
</style>